<script setup>
import {defineEmits, ref, toRaw} from "vue";
import {addCommentApi} from "@/api/comment.js";
import {ElMessage} from "element-plus";

let firstReply = ref('')
const emit = defineEmits(['message-sent']);

let props = defineProps({
  fatherCommentMessage:Object
})
let fatherCommentMessage= toRaw(props).fatherCommentMessage

let comment={
  postId:fatherCommentMessage.forumId,
  content:null,
  parentId:fatherCommentMessage.uid
}

async function sendComment() {
  if(!sessionStorage.getItem('token')){
    ElMessage({
      message: '请先登录',
      type: 'warning'
    })
    return
  }
  comment.content = firstReply.value
  await addCommentApi(comment)
  ElMessage({
    message: '评论成功',
    type: 'success'
  })
  firstReply.value = ''
  if(fatherCommentMessage.FirstCommentId!==null){
    emit('message-sent', fatherCommentMessage.FirstCommentId);
  }else {
    emit('message-sent', null);
  }
}
</script>

<template>
<div class="comment">
  <el-input
      v-model="firstReply"
      :rows="2"
      type="textarea"
      placeholder="请输入"
  />
  <el-button
      style="margin-top: 27px;margin-left: 13px;"
      type="primary"
      size="small"
      @click="sendComment"
  >发送</el-button>
</div>
</template>

<style scoped>
.comment {
  width: 76%;
  margin-left: 6%;
  margin-bottom: 1%;
  display: flex;
}
</style>